<template>
    <div class="online-showroom-container">
        <div class="left">
            <div
                class="l_item animate__animated animate__fadeInLeft"
                v-for="item in subCardInfo"
                :key="item.id"
            >
                <div class="card_img">
                    <img :src="item.imgUrl" />
                </div>
                <div class="card_content">
                    <div class="card_content_title">{{ item.title }}</div>
                    <div class="card_content_desc">{{ item.desc }}</div>
                </div>
                <div class="card_icon"><i class="el-icon-right"></i></div>
            </div>
        </div>
        <div class="right">
            <div
                class="r_item animate__animated animate__fadeInUp"
                v-for="item in cardInfo"
                :key="item.id"
            >
                <div class="card_img">
                    <img :src="item.imgUrl" />
                </div>
                <div class="title">{{ item.title }}</div>
                <div class="sub_title">{{ item.desc }}</div>
                <div class="btn"><i class="el-icon-right"></i></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "OnlineShowroom",
    data() {
        return {
            subCardInfo: [
                {
                    id: 1,
                    imgUrl: require("@/assets/images/online_icon01.jpg"),
                    title: "讯飞智元信息科技有限公司",
                    desc: "讯飞智元信息科技有限公司秉承“用人工智能建设美好城市”的崇高使命，依托智能语音和人工智能的",
                },
                {
                    id: 2,
                    imgUrl: require("@/assets/images/online_icon02.jpg"),
                    title: "讯飞智元信息科技有限公司",
                    desc: "讯飞智元信息科技有限公司秉承“用人工智能建设美好城市”的崇高使命，依托智能语音和人工智能的",
                },
                {
                    id: 3,
                    imgUrl: require("@/assets/images/online_icon01.jpg"),
                    title: "讯飞智元信息科技有限公司",
                    desc: "讯飞智元信息科技有限公司秉承“用人工智能建设美好城市”的崇高使命，依托智能语音和人工智能的",
                },
                {
                    id: 4,
                    imgUrl: require("@/assets/images/online_icon02.jpg"),
                    title: "讯飞智元信息科技有限公司",
                    desc: "讯飞智元信息科技有限公司秉承“用人工智能建设美好城市”的崇高使命，依托智能语音和人工智能的讯飞智元信息科技有限公司秉承“用人工智能建设美好城市”的崇高使命，依托智能语音和人工智能的",
                },
            ],
            cardInfo: [
                {
                    id: 1,
                    imgUrl: require("@/assets/images/online_img01.jpg"),
                    title: "上海宝钢大厦城市更新项目",
                    desc: "FTA建筑设计",
                },
                {
                    id: 2,
                    imgUrl: require("@/assets/images/online_img02.jpg"),
                    title: "上海宝钢大厦城市更新项目",
                    desc: "FTA建筑设计",
                },
                {
                    id: 3,
                    imgUrl: require("@/assets/images/online_img03.jpg"),
                    title: "上海宝钢大厦城市更新项目",
                    desc: "FTA建筑设计",
                },
            ],
        };
    },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/mixin.less";
.online-showroom-container {
    color: #ffffff;
    .main-bg();
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 30px;
    .left {
        width: 420px;
        height: 100%;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .l_item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #ffffff;
            box-sizing: border-box;
            padding: 15px 20px;
            transition-duration: 0.4s;
            cursor: pointer;
            &:hover {
                transform: scale(1.05);
                box-shadow: 0 0 8px #198dff;
            }
            &:nth-child(2) {
                animation-delay: 0.2s;
            }
            &:nth-child(3) {
                animation-delay: 0.3s;
            }
            &:nth-child(4) {
                animation-delay: 0.4s;
            }
            @media screen and (min-width: 1365px) {
                &:nth-child(4) {
                    display: flex;
                }
            }
            @media screen and (max-width: 1366px) {
                &:nth-child(4) {
                    display: none;
                }
            }
            .card_img {
                width: 48px;
                height: 48px;
                border: 1px solid #dddddd;
            }
            .card_content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin: 0 15px;
                .card_content_title {
                    color: #222222;
                    font-size: 15px;
                    line-height: 25px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
                .card_content_desc {
                    line-height: 20px;
                    margin-top: 5px;
                    color: #666666;
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                }
            }
            .card_icon {
                color: #999999;
            }
        }
    }
    .right {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .r_item {
            width: 32%;
            height: 100%;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 15px 20px 40px;
            transition-duration: 0.4s;
            cursor: pointer;
            &:nth-child(2) {
                animation-delay: 0.2s;
            }
            &:nth-child(3) {
                animation-delay: 0.3s;
            }
            &:hover {
                box-shadow: 0 0 10px #198dff;
                .btn {
                    height: 30px;
                    line-height: 30px;
                    color: #ffffff;
                    transform: translateY(-2px);
                    box-shadow: 0 0 5px #198dff;
                    background-image: linear-gradient(
                        to right,
                        #198dff,
                        #4dc3ff
                    );
                    border: 0;
                }
            }
            .card_img {
                width: 100%;
                flex: 1;
                border: 1px solid #dddddd;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .title {
                font-size: 15px;
                color: #222222;
                line-height: 25px;
                margin-top: 20px;
            }
            .sub_title {
                font-size: 12px;
                color: #666666;
                line-height: 25px;
                margin: 15px 0;
            }
            .btn {
                .hollow-btn();
                padding: 0 40px;
            }
        }
    }
}
</style>